<template>
  <div>
    <Category :disabled='type===0'/>
    <el-card
        shadow="always"
        :body-style="{ padding: '20px' }"
        style="margin-top: 30px"
    >
      <SpuList v-if="type === 0" @changeType="changeType"/>
      <SpuForm v-if="type === 1" :spuInfo="spuInfo" @changeType="changeType"/>
      <SkuForm v-if="type === 2" :spuInfo="spuInfo" @changeType="changeType"/>
    </el-card>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import {ref} from "vue";
import SpuList from "./components/SpuList/index.vue";
import SpuForm from "./components/SpuForm/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import useCategoryStore from "@/stores/category";
import {storeToRefs} from "pinia";
import {type SpuItemType} from "@/api/spu";
//控制当前展示的组件
const type = ref(0);

// 获取cateStore对象
const cateStore = useCategoryStore()
// 解构获得 3id
const {
  categoryList3Id
} = storeToRefs(cateStore);

// 保存Spu销售的属性
const spuInfo = ref<SpuItemType>({
  spuName: '',   // 名称
  description: '',  // 描述
  category3Id: categoryList3Id.value as number,  // 第三级分类ID
  tmId: 0,   // 当前所在的品牌id
  spuSaleAttrList: null,   // Spu销售属性值列表 //在分页列表的请求中,当前spu的拥有的销售属性是null,因为不需要展示
  spuImageList: null   // Spu图片列表 //在分页列表的请求中,当前spu的拥有的图片列表是null,因为不需要展示
})

// 自定义事件 SpuList(spu列表 默认显示) 和 {SpuFrom（spu增修） 和 SkuForm（sku增）组件共用} 三种组件条件渲染
const changeType = (newType: number, row?: SpuItemType) => { // row 修改的 row 行数据
  type.value = newType
  if (row) {  // 代表是修改操作
    spuInfo.value = row
  } else { // 代表是添加操作
    // 每次添加之前 清空上一次的数据
    spuInfo.value = {
      spuName: '',   // 名称
      description: '',  // 描述
      category3Id: categoryList3Id.value as number,  // 第三级分类ID
      tmId: 0,   // 当前所在的品牌id
      spuSaleAttrList: null,   // Spu销售属性值列表 //在分页列表的请求中,当前spu的拥有的销售属性是null,因为不需要展示
      spuImageList: null   // Spu图片列表 //在分页列表的请求中,当前spu的拥有的图片列表是null,因为不需要展示
    }
  }
}
</script>

<style scoped></style>
